<script lang="ts" setup>
import Card from '@renderer/components/Card.vue'
import FrameSizeSet from '@renderer/components/FrameSizeSet.vue'
import { useConfigStore } from '@renderer/stores'

const { config } = useConfigStore()
async function selecDirectory() {
  const { canceled, filePaths } = await window.api.selectDirectory()
  if (!canceled) {
    config.videoSaveDirectory = filePaths[0]
  }
}
</script>

<template>
  <main>
    <Card title="分辨率">
      <FrameSizeSet type="size" tip="请输入如:1920x1080的格式" button-style="primary" placeholder="分辨率"></FrameSizeSet>
    </Card>
    <Card title="帧数">
      <FrameSizeSet type="frame" button-style="success" tip="请输入如:24的数值" placeholder="帧数设置"></FrameSizeSet>
    </Card>
    <Card title="视频保存目录">
      <div class="flex gap-1">
        <el-input v-model="config.videoSaveDirectory" size="default"></el-input>
        <el-button type="primary" size="default" @click="selecDirectory">选择</el-button>
      </div>
    </Card>
  </main>
</template>

<style scoped lang="scss"></style>
